import { globalStyle, style } from '@vanilla-extract/css';
import { vars } from '../../theme/vars.css';
import { editorStyle } from './inlineEditor.css';
import { editorToolbarStyle } from './toolbar.css';

export { editorStyle, editorToolbarStyle };

export const richEditorStyle = style({
	display: 'flex',
	flexDirection: 'column',
	borderRadius: vars.layout.smallRadius,
	border: `1px solid ${vars.color.border}`,
	backgroundColor: vars.color.panelBackground,
	overflow: 'hidden',
	selectors: {
		'&:hover': {
			border: `1px solid ${vars.color.secondaryText}`,
			boxShadow: `0 0 2px ${vars.color.accent}`,
		},
		'&:focus-within': {
			border: `1px solid ${vars.color.accent}`,
		},
		'&.disabled': {
			pointerEvents: 'none',
			color: vars.color.disabledText,
		},
	},
	minHeight: '20em',
	maxHeight: '40em',
});

globalStyle(`${richEditorStyle}>.${editorToolbarStyle}`, {
	borderBottom: `1px solid ${vars.color.border}`,
});

globalStyle(`${richEditorStyle}>div.rich-text-box`, {
	display: 'flex',
	flexDirection: 'column',
	flex: 1,
	overflow: 'hidden',
	overflowY: 'auto',
});

globalStyle(`${richEditorStyle} .${editorStyle}`, {
	padding: '0.6em',
	flexGrow: 1,
	flexShrink: 0,
});

globalStyle(`${richEditorStyle} .${editorStyle}:focus`, {
	padding: '0.6em',
	outline: 'none',
});
